<template>
<h2>权益显示 查询 分页</h2>
    权益名称：<input type="text" placeholder="请输入权益名称" v-model="pname"/>
    <input type="button" value="查询" @click="Show"/>
    <table border="1" class="table table-success table-striped-columns">
        <thead>
            <tr>
                <td>权益名称</td>
                <td>权益说明</td>
                <td>是否自定义权益</td>
                <td>权益使用规则</td>
                <td>权益类型</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
             <tr v-for="item in info">
                <td>{{item.MR_Name}}</td>
                <td>{{item.MR_Info}}</td>
                <td>{{item.MR_IdCustom}}</td>
                <td>{{item.MR_Rule}}</td>
                <td>{{item.MR_RuleType}}</td>
                <td>
                    <input type="button" value="删除" @click="Shan(item.MR_Id)"/>
                    <input type="button" value="修改" @click="Xiu(item.MR_Id)"/>
                </td>
            </tr>
        </tbody>
    </table>
    
    当前共有{{pageInfo.TotalCount}}条数据
    每页显示{{pageInfo.pageSize}}条数据
    当前第{{pageInfo.pageIndex}}/{{pageInfo.PageCount}}页

    <a href="#" @click="LoadPage('F')" style="margin-right:20px;">首页</a>
    <a href="#" @click="LoadPage('L')" style="margin-right:20px;">上一页</a>
    <a href="#" @click="LoadPage('N')" style="margin-right:20px;">下一页</a>
    <a href="#" @click="LoadPage('E')" style="margin-right:20px;">尾页</a>

    <select @change="Ye" v-model="newSize">
        <option :value="1">1条/页</option>
        <option :value="2">2条/页</option>
        <option :value="3">3条/页</option>
        <option :value="4">4条/页</option>
    </select>

    <input type="text" v-model="newYe" style="width:40px;"/>
    <input type="button" @click="Tiao" value="跳转" style="margin-right:20px;"/>

</template>
<script setup lang="ts">

    import {ref,onMounted} from 'vue';
    import axios from 'axios';
    import {useRouter,useRoute} from 'vue-router';

    const router=useRouter();
    const route=useRoute();

    const newYe=ref("");
    const newSize=ref(2);

    const Ye=()=>{
        pageInfo.value.pageSize=newSize.value;
        Show();
    }

    const info=ref([{
        MR_Name:"",
        MR_Info:"",
        MR_IdCustom: true,
        MR_Rule:"",
        MR_RuleType: 0
    }]);

    const pname=ref("");

    //钩子
    onMounted(()=>{
        Show();
    });
    
    const pageInfo=ref({
        pageIndex:1,
        pageSize:2,
        PageCount:0,
        TotalCount:0
    })

    const Show=()=>{
        axios.get("https://localhost:7153/api/Member/GetRightsByPage/GetRightsByPage",
        {
            params:{
                name:pname.value,
                pageIndex:pageInfo.value.pageIndex,
                pageSize:pageInfo.value.pageSize
            }
        })
        .then(res=>{

            console.log(res.data);
            info.value=res.data.Data_Info;

            pageInfo.value.PageCount=res.data.PageCount;
            pageInfo.value.TotalCount=res.data.TotalCount;

        })
        .catch(err=>{
            console.log(err);
        })
    }

    const LoadPage=(choose:string)=>{
        switch(choose)
        {
            case "F":
            pageInfo.value.pageIndex=1;
            break;

            case "L":
                if(pageInfo.value.pageIndex<1){
                    alert('已经是第一页了');
                    
                }
                else
                {
                    pageInfo.value.pageIndex=pageInfo.value.pageIndex-1;
                }
            break;

            case "N":
            if(pageInfo.value.pageIndex>pageInfo.value.PageCount){
                alert('已经是最后一页了');
                
            }
            else{
                pageInfo.value.pageIndex=pageInfo.value.pageIndex+1;
            }
            break;

            case "E":
            pageInfo.value.pageIndex=pageInfo.value.PageCount;
            break;
            
        }
        Show();
    }

    const Tiao=()=>{
        var index=newYe.value;
        alert(index);
        if(index==""){
            alert('不能为空');
            return;
        }
        if(isNaN(Number(index))){
            alert('跳转页码必须位数字');
            newYe.value="";
            return;
        }
        if(Number(index)<1){
            alert('从第一页开始');
            newYe.value="";
            return;
        }
        if(Number(index)>pageInfo.value.PageCount){
            alert('跳转页码必须小于总页码');
            newYe.value="";
            return;
        }
        pageInfo.value.pageIndex=Number(index);
        Show();
    }

    const Shan=(is:number)=>{
        if(confirm("确定要删除吗？")){
            axios.delete("https://localhost:7153/api/Member/DelRights/DelRights",{
            params:{
                id:is
            }
        })
        .then(res=>{
            if(res.data>0){
                alert('删除成功！');
                Show();
            }
            else{
                alert('删除失败！');
            }
        })
        }
    }

    const Xiu=(id:number)=>{
        router.push({
            name:"UpdateMemberRights",
            params:{
                id:id
            }
        })
    }

</script>
